<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF-8">
	<title>班级圈</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/classes_circle.css">
	<link rel="stylesheet" href="css/main.css">

	<style>
		span.right {
			float: right;
			margin-left: 10px;
		}

		.text {
			white-space: pre-wrap;
		}

		video {
			max-width: 100%;
			max-height: 120px;
			min-width: 50%;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain">
			<div class="header">
				<div class="header_title">班级圈</div>
				<img onclick="history.back()" src="image/return.png" alt="" class="return">
			</div>

			<div id="main header-after">
				<div id="list">
					<ul id="vue-root">
						<li v-for="item in list" :key="item.id">
							<div class="po-avt-wrap">
								<img class="po-avt" :src="avatar(item)">
							</div>
							<div class="po-cmt">
								<div class="po-hd">
									<div class="po-name">
										<span v-text="item.personName"></span>
										<span class="right" v-if="canDel(item)" @click="del(item)">删除</span>
										<span v-if="isTeacher && !item.audited" class="right"
											@click="audit(item)">审核</span>
										<span v-if="!isTeacher && !item.audited" class="right"
											style="color: indianred">未审核</span>
									</div>
									<div class="post">
										<div v-if="item.text" v-text="item.text" class="text"></div>
										<div v-lazy-container="{selector:'img'}">
											<div v-for="(pic,index) in item.pics" class="img-wrap">
												<img :data-src="getImg(pic)" @click="bigImg(item.pics,index)">
											</div>
											<div style="clear: both"></div>
										</div>
										<div v-if="item.video" style="margin-top: 5px;">
											<video :src="getImg(item.video)" controls playsinline webkit-playsinline
												x5-video-player-type="h5" x5-video-player-fullscreen="true"
												loop></video>
										</div>
									</div>
									<p class="time" v-text="getTime(item.time)"></p>
									<img src="image/comment.png" class="c-icon" v-if="!item.banComment"
										@click="commenting=item.id">
									<img v-if="!item.liked" class="c-icon" src="image/like.png" @click="like(item)">
								</div>
								<div class="r"></div>
								<div class="cmt-wrap">
									<div class="like" v-if="item.likes.length!=0">
										<img src="image/like.png">
										<span v-text="join(item.likes)"></span>
									</div>
									<div class="cmt-list">
										<p v-for="(cmt,index) in item.comments" :key="index">
											<span v-text="cmt.personName" style="color: #576b95;"></span>：
											<span v-text="cmt.text" style="word-break: break-all;"></span>
											<span v-if="canDel(cmt)" @click="delComment(item.comments,index)"
												style="color: rgb(128, 0, 0);">删除</span>
										</p>
									</div>
								</div>
							</div>

							<div style="margin-left: 60px;" v-if="commenting==item.id">
								<input class="cmt" placeholder="此处输入评论" v-model="item.comment" v-focus>
								<button class="cmt" @click="comment(item)">评论</button>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<div class="upload">
				<a href="classes_circle_item.html">
					<p class="upload_title">点击发布班级圈</p>
				</a>
			</div>
		</div>
	</div>


	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/timeago.min.js"></script>
	<script src="/scriptZIP/vue-lazyload.js"></script>

	<script src="/wechat/js/wx.js"></script>
	<script src="/js/common.js"></script>

	<script>

		function typeName(type) {
			return type === null ? '老师' : ['', '父亲', '母亲', '家长'][type];
		}

		Vue.use(VueLazyload);
		Vue.directive('focus', {
			inserted: function (el) {
				el.focus();
			}
		});

		var app = new Vue({
			el: '#vue-root',
			data: {
				list: [],
				isTeacher: isTeacher(),
				user: getPerson(),
				commenting: 0,
			},
			created: function () {
				this.prefix = this.isTeacher ? '/t' : '/s';
				this.username = this.user.name + (this.isTeacher ? '老师' : typeName(this.user.type));
				var prefix = this.prefix;
				axios.get(prefix + '/circle2').then(function (res) {
					var ids = res.data;
					var list = this.list;
					var slow = function () {
						if (ids.length == 0) return;
						axios.get(prefix + '/circle/' + ids.shift()).then(function (res) {
							var it = res.data;
							it.pics = it.pics ? it.pics.split('|') : [];
							list.push(it);
						});
						setTimeout(slow, 666);
					};
					slow();
				}.bind(this));
			},
			methods: {
				avatar: function (item) {
					if (!item.avatar) return 'image/avatar.svg';
					var type = typeof item.type === 'number' ? 'student' : 'teacher';
					return '/static/' + this.user.schoolId + '/' + type + '/' + item.avatar;
				},
				getImg: function (pic) {
					return '/static/' + this.user.schoolId + '/circle/' + pic;
				},
				getTime: function (time) {
					return timeago.format(time, 'zh_CN');
				},
				join: function (people) {
					return people.join('，');
				},
				like: function (item) {
					axios.post(this.prefix + '/circle/like/' + item.id).then(function (res) {
						item.liked = true;
						item.likes.push(this.username);
					}.bind(this));
				},
				del: function (item) {
					if (!confirm('确认删除？')) return;
					axios.post(this.prefix + '/circle/del/' + item.id).then(function (res) {
						this.list.forEach(function (it, i, arr) {
							if (it.id === item.id) arr.splice(i, 1);
						});
					}.bind(this));
				},
				audit: function (item) {
					if (!confirm('确认此班级圈通过审核？')) return;
					axios.post('/t/circle/audit/' + item.id).then(function (res) {
						item.audited = true;
					});
				},
				canDel: function (item) {
					if (this.isTeacher) return true;
					return item.personId == this.user.id && item.type === this.user.type;
				},
				bigImg: function (pics, index) {
					pics = pics.map(this.getImg);
					wxPreviewImg(pics, index);
				},
				comment: function (circle) {
					axios.post(this.prefix + '/circle/comment', {
						circleId: circle.id,
						text: circle.comment
					}).then(function (res) {
						circle.comments.push({
							personName: this.username,
							text: circle.comment,
							personId: this.user.id,
							type: this.user.type
						});
						this.commenting = null;
						circle.comment = null;
					}.bind(this));
				},
				delComment: function (comments, index) {
					if (!confirm('确认删除该评论？')) return;
					axios.delete(this.prefix + '/circle/comment/' + comments[index].id).then(function (res) {
						comments.splice(index, 1);
					});
				}
			}
		});

		updateUnread('circle');

	</script>

</body>

</html>